<template>
  <div class="channel">
    <el-card shadow="hover">
      <div class="searchBox">
        <el-input placeholder="请输入编号" v-model="eventNumber">
          <template slot="prepend">编号</template>
        </el-input>
        <el-input placeholder="请输入名称" v-model="eventName">
          <template slot="prepend">名称</template>
        </el-input>
        <el-button @click="search" class="btn">查询</el-button>
      </div>
    </el-card>
    <!-- 选项卡 -->

    <el-card>
      <el-button
        style="float: right"
        size="small"
        @click="addChannel"
        class="btn"
        >新增</el-button
      >
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column label="编号">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.utm_source"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="名称">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.channel_name"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <div @click="upimg(scope.row)">
              <el-upload
                class="avatar-uploader upLoadBox"
                :http-request="upLoads"
                :show-file-list="false"
                action
              >
                <img
                  style="width: 100px; height: 100px"
                  :src="scope.row.screen_url"
                  alt="加载失败"
                />
              </el-upload>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="链接地址">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.jump_url"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="delChannel(scope.row)"
              >删除</el-button
            >
            <el-button @click="reverse(scope.row)" size="mini">确认</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>

    <el-dialog
      title="新增渠道"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <el-form>
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="form.formNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="渠道名称" :label-width="formLabelWidth">
          <el-input v-model="form.formName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader upLoadBox"
            :http-request="upLoad"
            :show-file-list="false"
            :on-preview="handlePictureCardPreview"
            :on-success="handleAvatarSuccess"
            action
            :limit="1"
          >
            <img v-if="form.url" :src="form.url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="链接地址" :label-width="formLabelWidth">
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { client } from "@/utils/oss.js";
import { ossToken } from "@/api/NotificationManagement";
// 接口api
import {
  getChannelList_api,
  addChannel_api,
  delChannel_api,
  reverseChannel_api,
} from "@/api/operationManagement";
export default {
  components: { Pagination },
  data() {
    return {
      eventNumber: "", //搜索编号
      eventName: "", //搜索名称
      tableData: [], //渠道
      loading: false,
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数

      formLabelWidth: "120px",
      dialogVisible: false,
      form: {
        formNumber: "", //表单
        formName: "", //表单
        url: "",
        path: "",
      },
      //   图片上传
      url1: "",
      imageUrl: [],
      targetObj: {},
      rowImg: [],
    };
  },
  created() {
    this.getChannelList();
  },
  methods: {
    target(obj) {
      this.targetObj = obj;
      console.log(obj, "okkk");
    },
    check(obj) {
      //   this.targetObj = obj;
      console.log(obj, "12121");
    },
    upimg(row) {
      this.imageUrl = row;
    },
    // handleAvatarSuccess(res, file) {
    //   this.imageUrl.screen_url = URL.createObjectURL(file.raw);
    // },
    // handlePictureCardPreview(file) {
    //   this.imageUrl.screen_url = file.url;
    // },

    getList() {
      this.loading = true;
      this.getChannelList();
    },
    // 获取渠道列表
    async getChannelList() {
      this.loading = true;
      let { code, data } = await getChannelList_api({
        page: this.page,
        pageSize: this.pageSize,
        utm_source: this.eventNumber,
        channel_name: this.eventName,
      });
      if (code == 0) {
        console.log(data, "3356");
        this.tableData = data.list;
        this.total = parseInt(data.total);
        this.loading = false;
      }
    },
    //搜索
    search() {
      this.getChannelList();
    },

    // 新增渠道按钮
    addChannel() {
      this.dialogVisible = true;
    },
    // 新增渠道逻辑
    async add() {
      let { code, data } = await addChannel_api({
        utm_source: this.form.formNumber,
        channel_name: this.form.formName,
        screen_url: this.form.url,
        jump_url: this.form.path,
      });
      if (code == 0) {
        this.$message({
          message: "新增成功",
          type: "success",
        });
        this.getChannelList();
        this.form = {};
      }
    },

    // 新增渠道确认
    onSubmit() {
      this.add();
      this.dialogVisible = false;
    },
    // 删除渠道
    delChannel(row) {
      // console.log(row, "888");
      this.$confirm("此操作将删除该条渠道, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.dels(row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除逻辑
    async dels(row) {
      let { code, data } = await delChannel_api({
        id: row.id,
      });
      if (code == 0) {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.getChannelList();
      }
    },
    // 编辑渠道
    async reverse(row) {
      console.log(row, "95727");
      let { code, data } = await reverseChannel_api({
        id: row.id,
        utm_source: row.utm_source,
        channel_name: row.channel_name,
        screen_url: row.screen_url,
        jump_url: row.jump_url,
      });
      if (code == 0) {
        this.$message({
          message: "更改成功",
          type: "success",
        });
        this.getChannelList();
      }
    },
    // 图片上传
    async upLoad(file, obj) {
      //   console.log(obj);
      await ossToken({
        type: 0,
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-" + res.data.regionId,
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      try {
        let fileNames =
          "/img/" +
          Math.round(new Date() / 1000) +
          "." +
          file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
        //fileNames上传文件的名称
        //file.file上传文件的内容
        let cli = client(this.dataObj);
        let result = cli.multipartUpload(fileNames, file.file);
        result.then(() => {
          self.form.url = "https://img.psychexy.com" + fileNames;
          // let newArr = [];
          // if ((self.targetObj.screen_url = "")) {
          //   self.targetObj.screen_url = [];
          // }
          // self.imageUrl.screen_url = self.form.url;
          // console.log(self.targetObj.screen_url);
          // self.targetObj.screen_url.push(self.url1);
          self.$message({
            message: "上传成功",
            type: "success",
          });
        });
      } catch (e) {
        self.$message.error("上传失败");
      }
    },

    async upLoads(file, obj) {
      //   console.log(obj);
      await ossToken({
        type: 0,
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-" + res.data.regionId,
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      try {
        let fileNames =
          "/img/" +
          Math.round(new Date() / 1000) +
          "." +
          file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
        //fileNames上传文件的名称
        //file.file上传文件的内容
        let cli = client(this.dataObj);
        let result = cli.multipartUpload(fileNames, file.file);
        result.then(() => {
          self.imageUrl.screen_url = "https://img.psychexy.com" + fileNames;
          // let newArr = [];
          // if ((self.targetObj.screen_url = "")) {
          //   self.targetObj.screen_url = [];
          // }
          // self.imageUrl.screen_url = self.form.url;
          // console.log(self.targetObj.screen_url);
          // self.targetObj.screen_url.push(self.url1);
          self.$message({
            message: "上传成功",
            type: "success",
          });
        });
      } catch (e) {
        self.$message.error("上传失败");
      }
    },
    // 删除图片
    delImg(row, i) {
      console.log(row, i, "666");
      row.screen_url.splice(i, 1);
      console.log(row.screen_url);
      // this.reverse(row);
      // console.log(this.imageUrl, "666");
    },
  },
};
</script>

<style lang="less" scoped>
.channel {
  margin: 30px;
  height: 100%;
  .searchBox {
    display: flex;
    margin-bottom: 40px;
    .el-input {
      width: 200px;
      margin-right: 20px;
    }
  }
  .el-dialog {
    p {
      font-size: 20px;
      .el-input {
        margin-top: 10px;
      }
    }
    .tableScopeSwitch .el-switch__label {
      position: absolute;
      display: none;
      color: #fff;
    }
    .tableScopeSwitch .el-switch__label--right {
      z-index: 1;
      right: -8px;
    }
    /*关闭时文字位置设置*/
    .tableScopeSwitch .el-switch__label--left {
      z-index: 1;
      left: 20px;
    }
    /*显示文字*/
    .tableScopeSwitch .el-switch__label.is-active {
      display: block;
    }
    .tableScopeSwitch.el-switch .el-switch__core,
    .el-switch .el-switch__label {
      width: 60px !important;
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
// /deep/.el-upload-list {
//   display: none;
// }
.el-card {
  margin-bottom: 20px;
}
</style>